<template>
  <!-- 内容列表 组件 -->
  <div class="list_box">
    <!-- 一级tab -->
    <div class="stairTab">
      <div
        class="tabs"
        :class="stairActive == index ? 'stairActive' : 'tab'"
        @click="handelTab(index)"
        v-for="(item, index) in ['资料列表', '我的资料']"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <!-- 二级tab -->
    <keep-alive>
      <component :is="isSecondTab" />
    </keep-alive>
  </div>
</template>

<script>
import SecondTab1 from "./SecondTab1.vue";
import SecondTab2 from "./SecondTab2.vue";
import { ref } from "@vue/reactivity";
export default {
  components: { SecondTab1, SecondTab2 },
  setup() {
    // 一级tab
    const stairActive = ref(0);
    const isSecondTab = ref("SecondTab1");
    const handelTab = (index) => {
      console.log(index);
      if (index === 0) {
        isSecondTab.value = "SecondTab1";
      } else {
        isSecondTab.value = "SecondTab2";
      }
      stairActive.value = index;
    };

    return { stairActive, isSecondTab, handelTab };
  },
};
</script>

<style lang="less" scoped>
.list_box {
  width: 100%;
  padding: 2.5rem 0;
  box-sizing: border-box;
  .stairTab {
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    position: fixed;
    top: 2.5rem;
    left: 0;
    padding: 0 1rem;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 99;
    .tabs {
      margin: 0 1rem;
    }
    .tab {
      font-size: 1.1rem;
      color: #777777;
      letter-spacing: 0.15rem;
    }
    .stairActive {
      font-size: 1.15rem;
      color: red;
      font-weight: bold;
      letter-spacing: 0.15rem;
    }
  }
}
</style>
